window.onload=function(){
     getMouseXy()
 };
//HTML canvas scale() 缩放
function getMouseXy(){
    var canvas = document.getElementById("demoCanvas");
    var ctx = canvas.getContext("2d");
    var x,y;

    canvas.addEventListener("mousemove", function(e){
        getMousePos(canvas, e,ctx)
    },false);

}

function getMousePos(canvas, e,ctx) {
    //1
    var rect = canvas.getBoundingClientRect();
    //2
    var x = e.clientX - rect.left * (canvas.width / rect.width);
    var y = e.clientY - rect.top * (canvas.height / rect.height);

    ctx.clearRect(0,0,800,600);
    ctx.fillText("Mouse: X-"+x+",Y-"+y,100,100);
    console.log("Mouse: X-"+x+",Y-"+y);

    console.log("x:"+x+",y:"+y);
    console.log("clientX:"+e.clientX+",clientY:"+e.clientY);
}

function resizeCanvas(){

    $('#demoCanvas').attr('width',$("#demoCanvas").parent().width()-6);/*$("#test1").parent().width() */
    $('#demoCanvas').attr('height',$("#demoCanvas").parent().height()-80);

    console.log($("#demoCanvas").parent().width());
    console.log($("#demoCanvas").parent().width()-6);
    //$('#demoCanvas').fillRect(0,0,$('demoCanvas').width(),$('demoCanvas').height());

}